import React, { useState } from 'react';
import {
  Card,
  Row,
  Col,
  Typography,
  Button,
  Space,
  List,
  Alert,
  Tag,
  Modal
} from 'antd';
import {
  PlayCircleOutlined,
  ArrowLeftOutlined,
  WarningOutlined,
  ClockCircleOutlined
} from '@ant-design/icons';
import { InventoryItem, EquipmentSlots } from '../types/game';
import { CITY_RUINS_MAP } from '../data/mapConfigs';

const { Title, Text } = Typography;

interface StartSessionScreenProps {
  equipment: EquipmentSlots;
  onStartSession: (selectedItems: InventoryItem[]) => void;
  onBack: () => void;
}

const StartSessionScreen: React.FC<StartSessionScreenProps> = ({
  equipment,
  onStartSession,
  onBack
}) => {
  const [confirmModalVisible, setConfirmModalVisible] = useState(false);

  // 将装备槽转换为装备列表
  const equipmentItems = Object.values(equipment).filter(item => item !== null) as InventoryItem[];

  const handleStartSession = () => {
    setConfirmModalVisible(true);
  };

  const confirmStartSession = () => {
    // 携带所有当前装备的装备
    onStartSession(equipmentItems);
    setConfirmModalVisible(false);
  };

  return (
    <div style={{ padding: '24px', minHeight: '100vh', backgroundColor: '#141414' }}>
      <Row gutter={[24, 24]}>
        <Col span={24}>
          <Card>
            <Space align="center" style={{ marginBottom: 16 }}>
              <Button 
                icon={<ArrowLeftOutlined />}
                onClick={onBack}
              >
                返回
              </Button>
              <Title level={2} style={{ margin: 0 }}>开始新的对局</Title>
            </Space>
            
            <Alert
              message="对局规则"
              description={
                <Space direction="vertical">
                  <Text>• 每局游戏时长为30分钟</Text>
                  <Text>• 每次行动都会消耗时间</Text>
                  <Text>• 必须在时间结束前到达撤离点并成功撤离</Text>
                  <Text>• 如果失败（时间耗尽或被击杀），将失去所有带入和收集的物品</Text>
                  <Text>• 成功撤离可以保留所有物品并获得奖励</Text>
                </Space>
              }
              type="warning"
              icon={<WarningOutlined />}
              style={{ marginBottom: 24 }}
            />
          </Card>
        </Col>

        <Col span={12}>
          <Card title="任务地图：城市废墟" size="small">
            <Space direction="vertical" size={16} style={{ width: '100%' }}>
              <Alert
                message="地图信息"
                description={
                  <Space direction="vertical">
                    <Text>{CITY_RUINS_MAP.description}</Text>
                    <Text>• 包含 {CITY_RUINS_MAP.zones.length} 个主要区域：工业区、住宅区、商业区</Text>
                    <Text>• 每个区域都有多个建筑和房间可供探索</Text>
                    <Text>• 区域之间通过特殊通道相连，可以自由移动</Text>
                    <Text>• 多个撤离点分布在不同区域</Text>
                  </Space>
                }
                type="info"
              />
              
              <Card size="small">
                <Space direction="vertical" size={8} style={{ width: '100%' }}>
                  {CITY_RUINS_MAP.zones.map(zone => (
                    <div key={zone.id} style={{ 
                      padding: '8px', 
                      backgroundColor: zone.color + '20', 
                      borderRadius: '4px',
                      border: `1px solid ${zone.color}`
                    }}>
                      <Space align="center" style={{ width: '100%', justifyContent: 'space-between' }}>
                        <Space direction="vertical" size={2}>
                          <Text strong style={{ color: zone.color }}>{zone.name}</Text>
                          <Text type="secondary" style={{ fontSize: '12px' }}>
                            {zone.description}
                          </Text>
                        </Space>
                        <Tag style={{ backgroundColor: zone.color + '30', color: zone.color, border: `1px solid ${zone.color}` }}>
                          {zone.buildings.length} 个建筑
                        </Tag>
                      </Space>
                    </div>
                  ))}
                </Space>
              </Card>
            </Space>
          </Card>
        </Col>

        <Col span={12}>
          <Card title="当前装备" size="small">
            <Space direction="vertical" style={{ width: '100%' }}>
              {equipmentItems.length > 0 ? (
                <div style={{ marginBottom: 16 }}>
                  {equipmentItems.map((item, index) => (
                    <Tag 
                      key={`${item.id}-${index}`}
                      color="blue" 
                      style={{ marginBottom: 4 }}
                    >
                      {item.name}
                    </Tag>
                  ))}
                </div>
              ) : (
                <Text type="secondary" style={{ marginBottom: 16, display: 'block' }}>
                  未装备任何装备，将空手进入对局
                </Text>
              )}
              
              <Button
                type="primary"
                size="large"
                block
                icon={<PlayCircleOutlined />}
                onClick={handleStartSession}
              >
                开始对局
              </Button>
            </Space>
          </Card>
        </Col>
      </Row>

      <Modal
        title="确认开始对局"
        open={confirmModalVisible}
        onCancel={() => setConfirmModalVisible(false)}
        onOk={confirmStartSession}
        okText="确认开始"
        cancelText="取消"
        width={600}
      >
        <Space direction="vertical" size={16} style={{ width: '100%' }}>
          <Alert
            message="风险警告"
            description="一旦开始对局，如果失败将失去所有选择的物品！请确认您的选择。"
            type="error"
            showIcon
          />
          
          <Card title="对局信息" size="small">
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Space direction="vertical" size={4}>
                  <Text strong>目标地图:</Text>
                  <Text>{CITY_RUINS_MAP.name}</Text>
                  <Text type="secondary" style={{ fontSize: '12px' }}>
                    {CITY_RUINS_MAP.description}
                  </Text>
                </Space>
              </Col>
              <Col span={12}>
                <Space direction="vertical" size={4}>
                  <Text strong>对局时长:</Text>
                  <Space>
                    <ClockCircleOutlined />
                    <Text>30 分钟</Text>
                  </Space>
                </Space>
              </Col>
            </Row>
          </Card>

          <Card title="携带物品" size="small">
            {equipmentItems.length > 0 ? (
              <List
                size="small"
                dataSource={equipmentItems}
                renderItem={(item: InventoryItem) => (
                  <List.Item style={{ padding: '4px 0' }}>
                    <Space>
                      <Tag color={
                        item.type === 'equipment' ? 'blue' : 
                        item.type === 'consumable' ? 'green' : 'default'
                      }>
                        {item.name}
                      </Tag>
                      {item.quantity && item.quantity > 1 && (
                        <Text type="secondary">x{item.quantity}</Text>
                      )}
                    </Space>
                  </List.Item>
                )}
              />
            ) : (
              <Text type="secondary">未装备任何装备</Text>
            )}
          </Card>
        </Space>
      </Modal>
    </div>
  );
};

export default StartSessionScreen;